<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <style>
        #employeeTable {
            width: 500px;
            text-align: center;
            border-collapse: collapse;
            background: #fff;
        }

        #employeeTable td {
            border: 1px solid #000;
        }

        #employeeTable thead {
            background-color: rgb(168, 163, 163);
        }

        /* 设置tbody中每行tr样式 */
        #employeeTable tbody tr:nth-child(n) {
            background-color: rgb(25, 230, 52);
        }

        #employeeTable tbody tr:nth-child(2n) {
            background-color: rgb(25, 148, 230);
        }

        /* 设置删除线 */
        #employeeTable tbody tr td:nth-child(3) {
            text-decoration: line-through;
        }

        a {
            color: #000;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>商品名称：<input type="text" id="username"> </td>
            <td></td>
        </tr>
        <tr>
            <td>商品类别：<select name="cars" id="password">
                    <option value="优选水果">优选水果</option>
                    <option value="卤味熟食">卤味熟食</option>
                    <option value="饮料酒水">饮料酒水</option>
                    <option value="休闲零食">休闲零食</option>
                </select></td>
            <td></td>
        </tr>
        <tr>
            <td>商品原价：<input type="text" id="repassword"></td>
            <td></td>
        </tr>
        <tr>
            <td>商品现价：<input type="text" id="tel"></td>
            <td></td>
        </tr>
        <tr>
            <td>商品数量：<input type="text" id="email"></td>
            <td></td>
        </tr>
        <tr>
            <td> <input type="submit" value="提交信息" class="aa"> </td>
        </tr>
    </table>

    <table id='employeeTable'>
        <thead>
            <tr>
                <td>商品名称</td>
                <td>商品类别</td>
                <td>原价</td>
                <td>现价</td>
                <td>库存</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>

</html>
<script>
    // 获取要操作的dom元素
    var username = document.querySelector('#username')
    var password = document.querySelector('#password')
    var repassword = document.querySelector('#repassword')
    var tel = document.querySelector('#tel')
    var email = document.querySelector('#email')
    var btn = document.querySelector('.aa')

    setInterval(function () {
        if (username.value != '' && repassword.value != '' && tel.value != '' && email.value != '') {
            btn.disabled = false
        } else {
            btn.disabled = true
        }
    }, 20)

    //设置提交事件
    btn.onclick = function () {
        var usernamev = username.value;
        var passwordv = password.value;
        var repasswordv = repassword.value;
        var telv = tel.value;
        var emailv = email.value;
        //创建新的tr
        var tr = document.createElement("tr");
        tr.innerHTML = //向tr添加dom结构
            "<td> " + usernamev + "</td>" +
            "<td>" + passwordv + "</td>" +
            "<td>" + "￥" + repasswordv + "</td>" +
            "<td>" + telv + "</td>" +
            "<td>" + telv + "</td>" +
            "<td><a href= '#'>删除</a></td>";
        //把tr加入dom结构中
        var employeeTable = document.getElementById("employeeTable");
        var tbody = employeeTable.getElementsByTagName("tbody")[0];
        tbody.appendChild(tr);
        //获取删除键
        var allA = document.getElementsByTagName("a");
        for (var i = 0; i < allA.length; i++) {
            allA[i].onclick = aa //给每个键绑定删除功能
            console.log(allA[i])
            //添加完tr清空表单内容
            username.value = '';
            password.value = '优选水果';
            repassword.value = '';
            tel.value = '';
            email.value = '';

        };
        btn.disabled = false
    };

    username.onblur = function () {
        // 获取当前最后一个td
        var tip = this.parentElement.nextElementSibling
        tip.style.color = 'red'
        tip.style.fontSize = '12px'
        // 判断失焦后输入框的内容是不是空的
        if (this.value == '') {
            tip.innerText = '用户名不能为空'
            // 当用户名为空的时候 下面就不走了 
            return false
        }
        // 如果条件都不执行的情况下就表示你的条件是满足的
        tip.innerText = ''
    }

    fn(repassword)
    fn(tel)
    fn(email)
    //封装一个删除tr函数
    function aa() {
        var tr = this.parentNode.parentNode;
        var name = tr.children[0].innerHTML;
        tr.parentNode.removeChild(tr);
        return false;
    };
    //封装一个判断事件函数
    function fn(batn) {
        batn.onblur = function () {
            // 获取当前最后一个td
            var tip = this.parentElement.nextElementSibling
            tip.style.color = 'red'
            tip.style.fontSize = '12px'
            // 判断失焦后输入框的内容是不是空的
            if (this.value == '') {
                tip.innerText = '内容不能为空'
                // 当用户名为空的时候 下面就不走了 
                return false
            }
            //由数字和字母组成
            var reg = /[^\d]/g
            if (reg.test(this.value)) {
                tip.innerText = '只能输入数字'
                this.value = ''
                return false
            }
            // 如果条件都不执行的情况下就表示你的条件是满足的
            tip.innerText = ''
        }
    }
</script>